{% extends "siteSetting/set_base.html" %}
{% block title %}车辆属性{% endblock %}
{% block head %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}">

<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/uikit.min.js') }}"></script>

<style>
	.uk-modal-header {
		padding: 15px;
		border-bottom: 1px solid #e5e5e5;
	}
</style>
{% endblock %}

{% macro render_form(name) %}
    <form action="/setting/carAttribute/edit/{{ name }}" method="get">
        <button class="edit btn btn-primary">编辑</button>
    </form>
{% endmacro %}


{% macro render_block(l, name) %}
  {#  {% for index in range(len(l)) %}   #}
    {% if l %}
    {% for item in l %}
        <li class="uk-grid-margin" style="">
            <div class="uk-panel uk-panel-hover" data-name="{{ name }}">
                <span><b class="sort-id">{{ item.get('sort') }}</b></span> |
                <div class='{{ name }}-text' style="display: inline;">{{ item.get('value').encode('utf-8').decode('utf-8') }}</div>
            </div>
        </li>
    {% endfor %}
    {% endif %}
{% endmacro %}


{# xxx : {xxx:[{"sort":1, 'id':'xx', 'value':xx}]  或 {xxx: []}  #}
{# l : [{"sort":1, 'id':'xx', 'value':xx}]  或 []  #}


{% macro combinate(field) %}
    {% set name = field.keys()[0] %}
    {% set l = field[name] %}

    <div>
        
        <h3>{{ name_dict[name] }}管理</h3>
        {{ render_form(name) }}
        <ul class="uk-grid uk-grid-small uk-grid-width-1-4 {{ name }}" style="">
            {{ render_block(l, name) }}
        </ul>
    </div>


{% endmacro %}


{% block page_content %}
<h1 class="page-header">车辆属性</h1>

<!-- ==================================== -->
{{ combinate(brand) }}
{{ combinate(price) }}
{{ combinate(car_model) }}
{{ combinate(car_age) }}
{{ combinate(mileage) }}
{{ combinate(gearbox) }}
{{ combinate(exhaust) }}
{{ combinate(seat) }}
{{ combinate(standard) }}
{{ combinate(color) }}
<!-- ==================================== -->


{% endblock %}

{% block scripts  %}
{{ super() }}
<script>
var ajaxPost = function (url, method, form, success, error) {
    var request = {
        url: url,
        type: method,
        contentType: 'application/json',
        success: function (r) {
            success(r);
        },
        error: function (err) {
            r = {
                success: false,
                data: err
            };
            error(r);
        }
    };
    if (method === 'post') {
        var data = JSON.stringify(form);
        request.data = data;
    }
    $.ajax(request);
};
var success = function (r) {
    alert(r.message);
};
var error = function (err) {
        
};   

var saveSubmit = function (name) {
	var url = '/setting/carAttribute/new_item/' + name;
	var method = 'post';
	
	var value = $("#" + name).val();
	var form = value;
	var success = function (r) {
		hideModal();
		showMessage(r);
	}
	ajaxPost(url, method, form, success, error);
}

var hideModal = function () {
	var modal = UIkit.modal(".myModal");
	modal.hide();
};
var showMessage = function (r) {
    UIkit.modal.confirm(r.message, function(){
        reload();
    });
};
var reload = function () {
	location.reload();
}

</script>

<script>
    var name_list = ['exhaust', 'mileage', 'car_age', 'color', 'car_model', 'price', 'seat', 'gearbox', 'brand', 'standard'];
    for (var i=0; i<name_list.length; i++) {
        var selector = '.' + name_list[i]
        var sort_ids = $(selector + ' ' + '.sort-id');
        $.each(sort_ids, function (e) {
            $(this).html(e + 1);
        })
    }

</script>


<script>
    nav = document.getElementById("nav_car_attr");
    nav.setAttribute("class", "active");
</script>
{% endblock %}
